<script src="/assets/js/vue.global3.5.13.js"></script>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" class="form-control" size="50" name="row[image]" type="text" value="{$row.image|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group" id="specs">
        <label class="control-label col-xs-12 col-sm-2">规格:</label>
        <div class="col-xs-12 col-sm-8">
            <div style="display: flex;">
                <select id="specGroupSelect" class="form-control">
                    <template v-for="(item, index) in specs">
                        <option value="item.id">{{item.name}}({{item.id}})</option>
                    </template>
                </select>
                <button type="button" class="btn btn-default" @click="addGSpecification($event)">添加</button>
            </div>
            <template v-if="selectedGroup.length>0">
                <table class="table table-bordered">
                    <tr>
                        <th style="display: none;">ID</th>
                        <th>规格</th>
                        <th>属性</th>
                        <th>操作</th>
                    </tr>
                    <template v-for="(selectGroupitem, selectGroupindex) in selectedGroup">
                        <tr>
                            <td style="display: none;"><input class="form-control" :name="'row[specification]['+selectGroupindex+'][id]'" type="text" :value="selectGroupitem.id"></input></td>
                            <td>
                                {{selectGroupitem.name}}
                                <input class="form-control" type="hidden" :name="'row[specification]['+selectGroupindex+'][name]'" type="text" :value="selectGroupitem.name"></input>
                            </td>
                            <td>
                                <table class="table table-bordered">
                                    <tr>
                                        <th>属性名</th>
                                        <th>属性价格</th>
                                        <th>库存型属性</th>
                                        <th>操作</th>
                                    </tr>
                                    <template v-for="(selectGroupItemAttrItem, selectGroupitemAttrItemIndex) in selectGroupitem.attrs">
                                        <tr>
                                            <td>
                                                <input class="form-control" :name="'row[specification]['+selectGroupindex+'][attrs]['+selectGroupitemAttrItemIndex+'][name]'" type="text" :value="selectGroupItemAttrItem.name"></input>
                                            </td>
                                            <td>
                                                <input class="form-control" :name="'row[specification]['+selectGroupindex+'][attrs]['+selectGroupitemAttrItemIndex+'][price]'" type="number" :value="selectGroupItemAttrItem.price"></input>
                                            </td>
                                            <td>
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <template v-if="selectGroupItemAttrItem.is_stock==1">
                                                            <input type="checkbox"  @change="ChangeIsStock($event,selectGroupindex,selectGroupitemAttrItemIndex)" checked="checked"></input>
                                                        </template>
                                                        <template v-if="selectGroupItemAttrItem.is_stock==0">
                                                            <input type="checkbox"  @change="ChangeIsStock($event,selectGroupindex,selectGroupitemAttrItemIndex)"></input>
                                                        </template>
                                                        <input type="hidden" :name="'row[specification]['+selectGroupindex+'][attrs]['+selectGroupitemAttrItemIndex+'][is_stock]'" :value="selectGroupItemAttrItem.is_stock"></input>
                                                    </span>
                                                    <input type="number" class="form-control" :name="'row[specification]['+selectGroupindex+'][attrs]['+selectGroupitemAttrItemIndex+'][stock]'" v-model="selectGroupItemAttrItem.stock"></input>
                                                </div>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger" @click="removeSpecification($event,selectGroupindex)">删除</button>
                                            </td>
                                        </tr>
                                    </template>
                                    <tr>
                                        <td colspan="4">
                                            <button type="button" class="btn btn-default" @click="addSpecification($event,selectGroupindex)">添加</button>
                                        </td>
                                    </tr>

                                </table>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="removeGSpecification($event,selectGroupindex)">删除</button>
                            </td>
                        </tr>
                    </template>
                </table>
            </template>

        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
<script>
    var g_specs=<?php echo json_encode($specs);?>;
    var g_selectedGroup=<?php echo json_encode($specificationGroupList);?>;
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const specs=ref(Object.assign([], g_specs));
            const selectedGroup=ref(Object.assign([], g_selectedGroup));
            const attr={
                name:"",
                price:"",
                is_stock:0,
                stock:0
            }

            const attrs = ref([Object.assign({}, attr)])

            const addSpecification=(event,selectGroupindex)=>{
                console.log("selectGroupitemAttrItemIndex",selectGroupindex);
                console.log("selectedGroup.value[selectGroupitemAttrItemIndex]",selectedGroup.value[selectGroupindex]);
                selectedGroup.value[selectGroupindex].attrs.push(Object.assign({}, attr));
                event.stopPropagation();
            }
            //添加规格分组
            const addGSpecification=(event)=>{
                var index=$("#specGroupSelect").index();
                selectedGroup.value.push(specs.value[index]);
                console.log("selectedGroup",selectedGroup.value);
            }
            const removeSpecification=(event,selectGroupindex)=>{
                selectedGroup.value[selectGroupindex].attrs.splice(selectGroupindex,1);
                event.stopPropagation();
            }
            const removeGSpecification=(event,selectGroupindex)=>{
                selectedGroup.value.splice(selectGroupindex,1);
                event.stopPropagation();
            }
            const ChangeIsStock=(event,selectGroupindex,selectGroupitemAttrItemIndex)=>{
                console.log("event",event);
                console.log("event.target.checked",event.target.checked);
                console.log("selectGroupitemAttrItemIndex",selectGroupitemAttrItemIndex);
                selectedGroup.value[selectGroupindex].attrs[selectGroupitemAttrItemIndex].is_stock=(event.target.checked?1:0);
            }
            console.log("specs",specs);
            return {
                attrs,
                specs,
                selectedGroup,
                ChangeIsStock,
                addSpecification,
                removeSpecification,
                addGSpecification,
                removeGSpecification
            }
        }
    }).mount('#specs')

</script>
